<template>
	<div class="tabel_Background">
		<div class="tabel_Background-wra">
			<div style="width: 50%;text-align: left;display: flex;">
				<img style="padding: 3%;width:20px;height:15px;" src="../../assets/icon_file.png" alt="" />
				<span class="well">{{wellName}}</span>
			</div>
			<div id="custom-table" style="height: 90%;">
				<el-scrollbar style="height: 100%;">
					<el-tree :data="dataSource" node-key="id" :highlight-current="false" default-expand-all :expand-on-click-node="false"
					 highlight-current @node-click="handleNodeClick">
						<template #default="{ node,data }">
							<!-- , data -->
							<span class="custom-tree-node" >
								<span class="node-img"
								:class="data.fileSuffixName ? 'node-img-ano' : ''"><img :src="
                    data.fileSuffixName === null
                      ? src1
                      : data.fileSuffixName === 'pdf'
                      ? src2
                      : data.fileSuffixName === 'ppt'
                      ? src3
                      : data.fileSuffixName === 'doc'
                      ? src4
					  : data.fileSuffixName === 'docx'
					  ? src4
					  : data.fileSuffixName === 'jpg'
					  ? src8
					  : data.fileSuffixName === 'rar'
					  ? src6
					  : data.fileSuffixName === 'zip'
					  ? src7
					  : data.fileSuffixName === 'xls'
					  ? src5
					  : data.fileSuffixName === 'XLS'
					  ? src5
					  : data.fileSuffixName === 'exe'
					  ? src10
					  : data.fileSuffixName === 'bmp'
					  ? src11
                      : src12
                  "
									 alt="" /></span>
								<span style="color: white;">{{ node.label }}</span>
							</span>
						</template>
					</el-tree>
				</el-scrollbar>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		ref
	} from "vue";
	import {
		getText
	} from "@/api/index";

	const Base64 = require('js-base64').Base64;
	// import base from '@/utils/base64';
	export default {
		name: "TextData",
		props: {
			title: String
		},

		data() {
			return {
				url: [],
				count1: 1,
				src1: require("../../assets/webqt/icon_file@2x.png"),
				src2: require("../../assets/webqt/icon_pdf@2x.png"),
				src3: require("../../assets/webqt/icon_ppt@2x.png"),
				src4: require("../../assets/webqt/icon_word@2x.png"),
				src5: require("../../assets/webqt/icon_xls@2x.png"),
				src6: require("../../assets/webqt/icon_RAR@2x.png"),
				src7: require("../../assets/webqt/icon_zip@2x.png"),
				src8: require("../../assets/webqt/icon_jpg@2x.png"),
				src9: require("../../assets/webqt/icon_xls@2x.png"),
				src10: require("../../assets/webqt/exe.png"),
				src11: require("../../assets/webqt/bmp.png"),
				src12: require("../../assets/webqt/unknown.png"),
				dataSource: [],
				count: 1,
				wellName: '',
			}
		},

		methods: {

			// handlePre() {
			// 	if (this.url.length == 2) {
			// 		return this.$message.error("已经最上级了！")
			// 	}
			// 	this.url.splice(this.url.length - 1, 1);
			// 	this.getTextInfor();
			// },

			handleNodeClick(data, node) {
				let url3 = '';
				url3 = data.fatherPath + '/' + data.label;
				// console.log(url3);
				if (data.children.length == 0) {
					if (data.fileType) {
						let url1 = "http://10.28.63.127:9006" + url3;
						window.open('http://10.28.63.127:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url1)));
						// this.url.splice(this.url.length - 1, 1);
					} else {
						this.getNextTextInfor(data, node);
					}
				}
			},

			async getNextTextInfor(val, node) {
				console.log(val);
				let url2 = '';
				let id = val.id;
				url2 = val.fatherPath + '/' + val.label;
				const {
					data: res
				} = await getText(url2);
				for (let a = 0; a < this.dataSource.length; a++) {
					if (this.dataSource[a].id == id) {
						console.log('到了层级1');
						for (let i = 0; i < res.data.length; i++) {
							this.dataSource[a].children.push({
								id: this.count++,
								label: res.data[i].fileName,
								fileSuffixName: res.data[i].fileSuffixName,
								fileType: res.data[i].fileType,
								children: [],
								fatherPath: url2,
							});
						};
					} else if (this.dataSource[a].id != id && this.dataSource[a].children.length != 0) {
						for (let b = 0; b < this.dataSource[a].children.length; b++) {
							if (this.dataSource[a].children[b].id == id) {
								console.log('到了层级2');
								for (let i = 0; i < res.data.length; i++) {
									this.dataSource[a].children[b].children.push({
										id: this.count++,
										label: res.data[i].fileName,
										fileSuffixName: res.data[i].fileSuffixName,
										fileType: res.data[i].fileType,
										children: [],
										fatherPath: url2,
									});
								};
							} else if (this.dataSource[a].children[b].id != id && this.dataSource[a].children[b].children.length != 0) {
								for (let c = 0; c < this.dataSource[a].children[b].children.length; c++) {
									if (this.dataSource[a].children[b].children[c].id == id) {
										console.log('到了层级3');
										for (let i = 0; i < res.data.length; i++) {
											this.dataSource[a].children[b].children[c].children.push({
												id: this.count++,
												label: res.data[i].fileName,
												fileSuffixName: res.data[i].fileSuffixName,
												fileType: res.data[i].fileType,
												children: [],
												fatherPath: url2,
											});
										};
									} else if (this.dataSource[a].children[b].children[c].id != id && this.dataSource[a].children[b].children[c].children
										.length != 0) {
										for (let d = 0; d < this.dataSource[a].children[b].children[c].children.length; d++) {
											if (this.dataSource[a].children[b].children[c].children[d].id == id) {
												console.log('到了层级4');
												for (let i = 0; i < res.data.length; i++) {
													this.dataSource[a].children[b].children[c].children[d].children.push({
														id: this.count++,
														label: res.data[i].fileName,
														fileSuffixName: res.data[i].fileSuffixName,
														fileType: res.data[i].fileType,
														children: [],
														fatherPath: url2,
													});
												};
											} else if (this.dataSource[a].children[b].children[c].children[d].id != id && this.dataSource[a].children[b]
												.children[c].children[d].length != 0) {

												for (let e = 0; e < this.dataSource[a].children[b].children[c].children[d].children.length; e++) {
													if (this.dataSource[a].children[b].children[c].children[d].children[e].id == id) {
														console.log('到了层级5');
														for (let i = 0; i < res.data.length; i++) {
															this.dataSource[a].children[b].children[c].children[d].children.push({
																id: this.count++,
																label: res.data[i].fileName,
																fileSuffixName: res.data[i].fileSuffixName,
																fileType: res.data[i].fileType,
																children: [],
																fatherPath: url2,
															});
														};
													}
												}
											}
										}
									}
								}
							}
						}
					}
				}
			},

			async getTextInfor() {
				this.dataSource = [];
				let url2 = '';
				for (let i = 0; i < this.url.length; i++) {
					url2 += this.url[i];
				};
				const {
					data: res
				} = await getText(url2);
				// console.log(res.data);
				for (let i = 0; i < res.data.length; i++) {
					this.dataSource.push({
						id: this.count++,
						label: res.data[i].fileName,
						fileSuffixName: res.data[i].fileSuffixName,
						fileType: res.data[i].fileType,
						children: [],
						fatherPath: url2,
					});
				};
				// console.log(this.dataSource);
			}
		},

		mounted() {
			this.url.push("/files");
			if (sessionStorage.getItem('wellName')) {
				this.wellName = sessionStorage.getItem('wellName');
				// this.url.push("/威202H19-1");
				this.url.push("/" + sessionStorage.getItem('wellName'));
				this.getTextInfor();
				// sessionStorage.removeItem("wellName");
			}


			this.$bus.$on('wellNameChoose', content => {
				this.wellName = content;
				this.url.splice(1, this.url.length - 1);
				this.url.push("/" + content);
				this.getTextInfor();
				// console.log(content)
			});

			// window.addEventListener("setItem", () => {
			// 	let wellName1 = sessionStorage.getItem("anaDataChange");
			// 	// console.log(this.dataSource);
			// 	// console.log(wellName);
			// 	if (wellName1 != null) {
			// 		this.url.splice(1, this.url.length - 1);
			// 		this.url.push("/" + wellName1);
			// 		this.getTextInfor(-1, this.url);
			// 	};
			// 	// console.log(this.url);
			// });
		},

		beforeDestroy() {
			// 移除对 sessionStorage 的监听
			// window.removeEventListener("setItem", () => {});
			this.$bus.$off('wellNameChoose');
			// sessionStorage.removeItem('data');
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.tabel_Background {
		width: 23%;
		height: 100%;
		margin-left: 1%;
		box-sizing: border-box;
	}

	.tabel_Background-wra {
		width: 100%;
		height: 100%;
		background-image: url("../../assets/bg2@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; // contain; // cover;
		padding: 2%;
		box-sizing: border-box;
	}

	.well {
		margin-top: 2.3%;
		font-size: 120%;
		margin-left: 2%;
	}

	/* 横线 */
	.line2 {
		width: 100%;
		height: 1px;
		margin-top: 2%;
		position: relative;
		text-align: center;
		background: #0e4982;
		overflow: hidden;
	}

	#custom-table {
		margin-top: 2%;
		color: white;

		.el-tree {
			background: transparent;
			height: 100%;
		}

		/deep/ .el-icon-caret-right {
			margin: 0 10px 0 10px;
			position: relative;
			background: url("../../assets/btn_arrow@2x.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		/deep/ .expanded {
			background: url("../../assets/btn_arrow@2x.png");
			background-size: contain;
			background-repeat: no-repeat;
		}

		/deep/ .el-tree-node__content>.el-tree-node__expand-icon {
			padding: 3px;
		}

		/deep/ .el-icon-caret-right:before {
			content: "";
			display: inline-block;
			width: 8px;
			height: 1px;
		}

		// /deep/ .el-tree-node__content > .el-tree-node__expand-icon {
		//   padding: 0;
		// }
		/deep/ .is-leaf {
			background-image: none;
			background-size: 100% 100%;
		}

		/deep/.el-tree-node.is-current>.el-tree-node__content {
			background-color: #063666 !important;
			// color: #333 !important;
		}

		/* 改变被点击节点背景颜色，字体颜色 */
		/deep/ .el-tree-node:focus>.el-tree-node__content {
			background-color: #063666 !important;
			color: #fff !important;
		}

		/*节点失焦时的背景颜色*/
		/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
			background-color: #063666 !important;
			color: #fff !important;
		}

		/deep/ .el-tree-node__content:hover {
			background-color: #063666;
		}

		/deep/ .el-tree-node__content {
			height: 2%;
		}

		/deep/ .el-tree-node__label {
			color: #fff;
			position: relative;
			padding-left: 20px;
		}

		/deep/ .el-tree-node {
			// height: 3%;
		}

		/deep/ .el-tree-node__content {
			height: 40px;
		}

		.custom-tree-node {
			display: flex;
			align-items: center;

			.node-img {
				margin-right: 10px;
			}
		}

		.node-img,
		.node-text {
			display: inline-block;
			width: 25px;
			height: 20px;
			color: #fff;
		}

		.node-img-ano {
			width: 20px;
			height: 20px;
		}

		.node-img img {
			width: 100%;
			height: 100%;
			color: #fff;
		}

		/deep/ .el-tree-node__label:before {
			content: "";
			display: block;
			width: 20px;
			height: 14px;
			// background: #3a7dff;
			background: url("../../assets/webqt/icon_file@2x.png");
			background-size: 100% 100%;
			position: absolute;
			left: 0; //20px;
			top: 4px;
		}
	}

	.button {
		width: 4.5%;
		height: 3%;
		background-image: url("../../assets/btn_leibie_pressed@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 50%;
		right: 11%;
		// left: -37%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.el-tree {
		display: inline-block;
		min-width: 100%;
	}
</style>
